import { useState, useEffect } from 'react'
import { Checkbox, Input, Switch, Popover, Modal, message } from 'antd'
import { cloneDeep } from 'lodash';
import CommonModal from '@/components/CommonModal'
import CommonLoading from '@/components/CommonLoading';
import { saveJdCodeOp } from '../service';

//京东店铺同步弹窗
 const MarkUnusalModal = ({ visible, shopList, handleOk, handleCancel }) => {

   const [loading, setLoading] = useState(false);//loading
   const [list, setList] = useState([]);
   const [hasChecked, setChecked] = useState(true);
   const [show, setShow] = useState(false);

   useEffect(() => {
     if (visible) {
       const arr = [];
       shopList.map(item => {
         arr.push({ ...item, checked: true });
       })
       setList(arr);
     }
   }, [visible])

   useEffect(()=> {
     const arr = list.filter(item=>item.checked);
     if(arr.length){
       setChecked(true);
       const bool = arr.some(child=> !child.customerCode);
       setShow(bool);
     }else{
       setShow(false);
       setChecked(false);
     }
   },[list])

  const onOk = async () => {
    if(!hasChecked){
      return Modal.info({content:'请至少选择1个网店'})
    }

    if(show){
      return Modal.info({content:'勾选店铺的青龙编码不能为空'})
    }
     const data = [];
     list.map(item=>{
       if(item.checked){
         const { id, customerCode, ecstoreId, ecstoreName, isOut } = item
          data.push({
            id,
            ecstoreId,
            ecstoreName,
            customerCode, 
            isOut: isOut ? 1 : 0
          })
       }
     })
      setLoading(true)
      const { msg, success } = await saveJdCodeOp({data})
      if(success){
        message.success(msg);
        handleOk();
        onCancel();
      }
      setLoading(false)
    }

  const onCancel = () => {
    handleCancel();
    setList([]);
    setChecked(true);
    setShow(false);
  }

  const handleSwitch = (val, index, key) => {
    const arr = cloneDeep(list);
    arr[index][key] = val;
    setList(arr);
  }

  return (
    <CommonModal
       title='同步已开通的电子面单服务'
       visible={visible}
       onOk={onOk}
       onCancel={onCancel}
       width='620px'
    >
      <div className='lable-require' style={{fontWeight:'bold', marginBottom:'8px'}}>选择需要同步面单的网店：</div>
         { list.map((item,index)=>{
           return  <div key={item.id} style={{display:"flex",marginBottom:8}}>
              <div style={{display:"flex",width:'40%'}}>
                <Checkbox checked={item.checked} onChange={(e)=>handleSwitch(e.target.checked,index,'checked')}/>&nbsp;&nbsp;
                <Popover content={(<div className='custom-ant-popver-content'>{item.storeName}-京东</div>)}>
                <span className='textOverflowMultiTwo' style={{cursor:'pointer'}}>{item.storeName}-京东</span>
                </Popover>
               </div>
              <span className="lable-require">青龙编码：</span>
              <Input type="text" defaultValue={item.customerCode} style={{width:120,height:24}} onBlur={(e)=>handleSwitch(e.target.value,index,'customerCode')} disabled={!item.checked}/>
              &nbsp;&nbsp;&nbsp;是否发外单：<Switch checked={Boolean(item.isOut)} checkedChildren="是" unCheckedChildren="否" size='default' onChange={(e)=>handleSwitch(e,index,'isOut')} disabled={!item.checked}/>
            </div>
         })}
      { !hasChecked && <div className='common-color9' style={{margin:'6px 0 0 24px'}}>至少选择1个网店</div> }
      {show && <div className='common-color9' style={{margin:'6px 0 0 24px'}}>勾选店铺的青龙编码不能为空</div>}

      <CommonLoading loading={loading} />
    </CommonModal>
  )
}

export default MarkUnusalModal